<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <style>
        .contract-group {padding:0 20px 20px; }
        .contract-title {font-size: 18px;text-align: center;}
        .contract-content { min-height: 50px;}
        .contract-signature {border:1px solid #ccc; width:500px;}
        .contract-signature img {width: 100%;}
    </style>
</head>
<body>
<shiro:hasPermission name="sys:product:add">
    <input id="p_add"  value="1" type="hidden">
</shiro:hasPermission>
<shiro:hasPermission name="sys:product:update">
    <input id="p_update"  value="1" type="hidden">
</shiro:hasPermission>

<div class="panel panel-f5" id="app">
    <!-- 分页查询的地址-->
    <div class="panel-body panel-white">
        <div class="table-responsive">
            <table id="myTable"
                   class="table table-hover"
                   data-url="${basePath}/admin/agent/order/queryContractByOrderId"
                   data-pageSize="10,50,100" data-method="GET">
                <thead>
                <!-- 需要循环的字段  对应mapper文件-->
                <tr>
                    <th data-type="xuhao">序号</th>
                    <th data-field="createTime">创建时间</th>
                    <th data-field="orderId">所属订单号</th>
                    <th data-field="contractName">合同名称</th>
                    <th data-field="contractContent" data-call="true">合同内容</th>
                </tr>
                </thead>
                <tbody id="tbodyId">
                <tr>
                    <td>1</td>
                    <td v-text="dataObj.createTime"></td>
                    <td v-text="dataObj.orderId"></td>
                    <td v-text="dataObj.contractName"></td>
                    <td><button type="button" @click="viewContract">查看合同</button></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页条-->
        <#--<div class="row">-->
            <#--<div align="left" class="col-xs-6">-->
                <#--<div class="input-group">-->
                    <#--<span class="input-group-addon" id="pageCount"></span> <select-->
                        <#--id="pageSize" onchange="search(1)" class="form-control"-->
                        <#--style="width: 100px"></select>-->
                <#--</div>-->
            <#--</div>-->
            <#--<div align="right" class="col-xs-6">-->
                <#--<ul class="pagination" id="pagination"></ul>-->
            <#--</div>-->
        <#--</div>-->
    </div>


                <form id="Form" class="form-horizontal" method="post" style="display: none">

                    <div class="contract-group">
                        <div class="contract-title" v-text="dataObj.contractName"></div>
                        <div class="contract-content">
                            <a class="media" :href="dataObj.contractUrl">请点击下载查看合同</a>
                        </div>
                    </div>
                    <div class="contract-group">
                        <span class="detail-span">姓名:{{dataObj.name}}</span> &nbsp;&nbsp;&nbsp;
                        <span class="detail-span">身份证:{{dataObj.idCard}}</span>
                    </div>
                    <div class="contract-group">
                        <span class="detail-span">签名:</span>
                        <div class="contract-signature">
                            <img :src="dataObj.signedPhoto">
                        </div>
                    </div>
                    <#--<div class="form-group">-->
                        <#--<span class="control-label col-sm-4 col-xs-4"></span>-->
                        <#--<div class="col-sm-8 col-xs-8">-->
                            <#--<button type="button" class="btn btn-info" onclick="goBack();"><i class="fa fa-close"></i>返回-->
                            <#--</button>-->
                        <#--</div>-->
                    <#--</div>-->
                </form>


</div>


<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            dataObj: {}
        },
        created: function () {
            var url = window.location.href;
            var orderId = url.split("order=")[1];
            var _this = this;

            $.ajax({
                url: '${basePath}/admin/agent/order/queryContractByOrderId/'+orderId,
                type: 'GET',
                dataType: 'json',
                data: {},
                success: function(data){
                    _this.dataObj = data.result;
                },
                error: function(){
                    console.log("error")
                }
            })
        },
        methods: {
            viewContract: function(){
                layer.open({
                    type: 1,
                    area: ['600px', '90%'],
                    title:['查看合同','text-align:center;'],
                    content: $("#Form")
                })
            }
        }
    })

    <#--//循环列表数据以及操作按钮-->
    <#--function tableCallBack(data, id){-->
        <#--console.log(data);-->
        <#--if(id=='contractContent') {-->
            <#--var _btn = '';-->
            <#--if (data.contractVerify == 1) {-->
                <#--_btn = '<button type="button" class="btn btn-white btn-xs" onclick="viewContract(\''+ data.orderId +'\')">查看内容 </button> ';-->
            <#--} else {-->
                <#--_btn = '<button type="button" class="btn btn-white btn-xs" onclick="verifyContract(\''+ data.orderId +'\')">审核合同 </button> ';-->
            <#--}-->
            <#--return _btn;-->
        <#--}-->
    <#--}-->
    <#--/*审核合同*/-->
    <#--function verifyContract(id){-->
        <#--layer.open({-->
            <#--type: 2,-->
            <#--area: ['600px', '90%'],-->
            <#--title:['审核合同','text-align:center;'],-->
            <#--content: '${basePath}/admin/coupons/member/contractView/'+id //iframe的url-->
        <#--})-->
    <#--}-->

    <#--function viewContract(id) {-->
        <#--layer.open({-->
            <#--type: 2,-->
            <#--area: ['600px', '90%'],-->
            <#--title:['审核合同','text-align:center;'],-->
            <#--content: '${basePath}/admin/agent/order?pageName=contract_detail&dataArr='+id+"/"+id //iframe的url-->
        <#--})-->
    <#--}-->


</script>
</body>
</html>